<template>
  <div class="main-container">
    <SearchBar></SearchBar>
    <div class="search-setting">
      <div class="car-price">
        <span class="span">汽车类型</span>
        <el-radio-group v-model="type">
          <el-radio-button
            label="不限"
            style="padding-left: 20px"
          ></el-radio-button>
          <el-radio-button label="跑车"></el-radio-button>
          <el-radio-button label="MPV"></el-radio-button>
          <el-radio-button label="微面"></el-radio-button>
          <el-radio-button label="SUV"></el-radio-button>
          <el-radio-button label="轿车"></el-radio-button>
        </el-radio-group>
      </div>
      <div class="car-level">
        <span class="span">能源类型</span>
        <el-radio-group v-model="energyType">
          <el-radio-button
            label="不限"
            style="padding-left: 20px"
          ></el-radio-button>
          <el-radio-button label="汽油"></el-radio-button>
          <el-radio-button label="48V轻混系统"></el-radio-button>
          <el-radio-button label="油电混合"></el-radio-button>
          <el-radio-button label="插电式混合动力"></el-radio-button>
          <el-radio-button label="纯电动"></el-radio-button>
          <el-radio-button label="汽油电驱"></el-radio-button>
        </el-radio-group>
      </div>
      <div class="car-energy">
        <span class="span">价格区间</span>
        <el-radio-group v-model="price">
          <el-radio-button
            label="不限"
            style="padding-left: 20px"
          ></el-radio-button>
          <el-radio-button label="0-10万"></el-radio-button>
          <el-radio-button label="10-15万"></el-radio-button>
          <el-radio-button label="15-20万"></el-radio-button>
          <el-radio-button label="20-25万"></el-radio-button>
          <el-radio-button label="25-30万"></el-radio-button>
          <el-radio-button label="30-40万"></el-radio-button>
          <el-radio-button label="50万以上"></el-radio-button>
        </el-radio-group>
      </div>
    </div>
    <div class="setting">
      <el-card class="card">
        <span class="span">已选择：</span>
        <el-tag
          v-for="(item, index) in searchData"
          :key="index"
          closable
          :disable-transitions="false"
          @close="handleClose(index)"
        >
          {{ item }}
        </el-tag>
      </el-card>
    </div>
    <div class="search-view">
      <div class="view-card" v-if="CarData.length != 0">
        <el-col :span="6" v-for="(item, index) in CarData" :key="index">
          <el-card shadow="hover">
            <div class="demo-image__placeholder">
              <div class="block">
                <el-image :src="item.url" @click="toDetails(item.urlId)"></el-image>
                <span class="demonstration">{{ item.carName }}</span>
                <span
                  class="demonstration"
                  style="margin: 10px; letter-spacing: 0px"
                  >{{
                    item.price == null ? "暂无报价" : "￥" + item.price + "万"
                  }}</span
                >
              </div>
            </div>
          </el-card>
        </el-col>
      </div>
      <div class="view-card-not" v-else>
        <p>暂无数据</p>
      </div>
    </div>
  </div>
</template>

<script>
// import { Form } from 'element-ui';
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

import SearchBar from "@/components/querypage/SearchBar.vue";
export default {
  components: { SearchBar },
  //import引入的组件需要注入到对象中才能使用
  // components: {},

  name: "SearchView",

  created() {
    this.JudgmentData();
  },

  props: {
    carName: {
      // 参数类型 => 字符串
      type: String,
      // 默认值 => 空字符串
      default: "",
    },
  },

  data() {
    //这里存放数据
    return {
      type: "不限",
      energyType: "不限",
      price: "不限",

      // 暂时存储最大值，最小值
      maxprice: null,
      minprice: null,

      oldmaxprice: null,
      oldminprice: null,

      searchData: ["不限", "不限", "不限"],

      // 搜索到的数据
      CarData: "",
    };
  },
  //监听属性 类似于data概念
  computed: {},

  //监控data中的数据变化
  watch: {
    type(to) {
      this.searchData[0] = to;
      this.$router.push(`/search/${to}`);
      this.getCarData();
    },

    energyType(to) {
      this.searchData[1] = to;
      this.getCarData();
    },

    price(to) {
      this.searchData[2] = to;
      this.getCarData();
    },
  },

  //方法集合
  methods: {
    handleClose(index) {
      if (this.searchData[index]) {
        this.searchData[index] = "不限";
        if (this.searchData[0] == "不限") {
          this.type = "不限";
        }
        if (this.searchData[1] == "不限") {
          this.energyType = "不限";
        }
        if (this.searchData[2] == "不限") {
          this.price = "不限";
        }
      }
    },

    // 获取搜索数据
    getSearchData() {
      if (this.price != "不限") {
        if (this.price != "50万以上") {
          this.maxprice = this.price.split("-")[1].slice(0, 2);
          this.minprice = this.price.split("-")[0];
        } else {
          this.minprice = this.price.slice(0, 2);
          this.maxprice = null;
        }
      } else {
        this.maxprice = null;
        this.minprice = null;
      }
      let SearchData = {
        energyType: this.energyType == "不限" ? null : this.energyType,
        maxPrice: this.maxprice,
        minPrice: this.minprice,
        type: this.type == "不限" ? null : this.type,
      };
      return SearchData;
    },

    // 标签搜索接口
    getCarData() {
      let SearchData = this.getSearchData();
      this.axios
        .post("/cars/get_label", `${JSON.stringify(SearchData)}`, {
          headers: {
            // 设置请求头
            "Content-Type": "application/json",
          },
        })
        .then((res) => {
          if (res.data.status == 20000) {
            this.CarData = res.data.data;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // 搜索
    search() {
      this.axios
        .get(`/cars/search?key=${this.carName}`)
        .then((res) => {
          if (res.data.status == 20000) {
            this.CarData = res.data.data;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // 判断传入数据
    JudgmentData() {
      if (
        this.carName == "轿车" ||
        this.carName == "SUV" ||
        this.carName == "跑车" ||
        this.carName == "微面" ||
        this.carName == "不限" ||
        this.carName == ""
      ) {
        this.type = this.carName == "" ? "不限" : this.carName;
        this.getCarData();
      } else {
        this.type = "不限";
        this.search();
      }
    },

    // 汽车详情页
    toDetails(urlId) {
      this.$router.push(`/cardetail/${urlId}`);
    },
  },
};
</script>
<style lang='scss' >
.main-container {
  display: flex;
  flex-direction: column;
  background-color: #34373c;
  height: 100vh;

  .car-price,
  .car-level,
  .car-energy {
    height: 6vh;
    display: inline-block;
    text-align: justify;
    padding-top: 10px;
    margin-left: 16px;

    .span {
      display: inline-block;
      width: 68px;
      text-align: right;
    }

    .el-radio-button__orig-radio:checked + .el-radio-button__inner {
      background-color: #2c3e50;
      border-color: #2c3e50;
    }

    .el-radio-button__inner {
      letter-spacing: 2px;
    }
  }

  .search-setting {
    margin: 0px 30px;
    margin-top: 90px;
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    border-radius: 4px;
    padding: 8px 0;
  }

  .setting {
    background-color: #e4e7ed;
    margin-top: 10px;
    margin-left: 30px;
    margin-right: 30px;
    display: flex;
    justify-content: center;
    align-items: center;

    .el-card__body {
      display: flex;
      justify-content: left;
      align-items: center;
      margin-left: 12px;
      height: 4vh;
      .el-tag {
        margin-right: 10px;
      }
    }

    .el-card__body,
    .el-main {
      padding: 8px 6px;
    }

    .el-tag {
      background-color: #2c3e50;
      color: #fff;
      font-size: 13px;
    }

    .el-tag .el-tag__close {
      color: #fff;
    }
  }

  .card {
    background-color: #fff;
    width: 100%;
    transition: 0s !important;

    .span {
      display: inline-block;
      width: 84px;
      text-align: center;
    }
  }

  .search-view {
    background-color: #34373c;
    display: flex;
    justify-content: center;

    .view-card {
      width: 100%;
      background-color: #34373c;
      margin: 15px 10px;
      float: left;

      .el-col-6 {
        width: 345px;
        margin: 10px 0 10px 24px;

        .el-card {
          height: 270px;
          background-color: #f1f1f1;
          border-color: #f1f1f1;
          cursor: pointer;
        }

        img {
          width: 100%;
          display: block;
        }

        .demonstration {
          font-size: 18px;
          letter-spacing: 2px;
        }

        .is-hover-shadow:hover {
          box-shadow: 0px 6px 20px 6px rgba($color: #fff, $alpha: 0.5);
        }
      }
    }

    .view-card-not {
      width: 100%;
      background-color: #fff;
      margin-top: 10px;
      margin-left: 30px;
      margin-right: 30px;

      p {
        margin: 40px 0;
        font-size: 18px;
        letter-spacing: 4px;
      }
    }
  }
}

.set-text {
  margin-right: 20px;
}
</style>
